import React, { Component } from "react";
import LeafLet from "./leaflet";
import Earth from "./cesium"
import { Row, Col } from 'antd';
export default class Data extends Component {
    constructor() {
        super();
        this.state = {
            longitude: null, // 经度
            latitude: null, //纬度
            heightView: 13000000, //视高
            bounds: null,
            flag: null,
            twoSpan: 12,
            threeSpan: 12,
            isSame: true
        }
    }
    componentDidMount() {
        this.props.onRef(this)
    }
    leafletToData = (ref) => {
        this.child = ref
    }
    getDatas = (data, isTrue) => {
        this.setState({
            longitude: data.longitude,
            latitude: data.latitude,
        });
        if (this.state.isSame) {
            this.setState({
                flag: isTrue
            })
        }
    }
    getHeightView = (data, isTrue) => {
        this.setState({
            heightView: data,
        })
        if (this.state.isSame) {
            this.setState({
                flag: isTrue
            })
        }
    }

    setDatas = (data, isTrue) => {
        this.setState({
            latitude: data.latitude,
            longitude: data.longitude,
        })
        if (this.state.isSame) {
            this.setState({
                flag: isTrue
            })
        }
    }

    setHeight = (data, isTrue) => {
        this.setState({
            heightView: data.heightView,
        })
        if (this.state.isSame) {
            console.log('开');
            this.setState({
                flag: isTrue
            })
        }
    }
    notSame = () => {
        console.log("关");
        this.setState({
            isSame: false
        })
    }
    same = () => {
        this.setState({
            isSame: true
        })
        this.child.same()
    }
    showOnlyTwo = () => {
        this.child.showOnlyTwo()
    }
    render() {
        return (
            <div>
                <Row>
                    <Col span={this.props.data.twoSpan}>
                        <LeafLet data={this.state}
                            flag={this.state.flag}
                            setDatas={this.setDatas}
                            setHeight={this.setHeight}
                            leafletToData={this.leafletToData} />
                    </Col>
                    <Col span={this.props.data.threeSpan}>
                        <Earth getDatas={this.getDatas}
                            getHeightView={this.getHeightView}
                            data={this.state}
                            flag={this.state.flag} />
                    </Col>
                </Row>
            </div>
        );
    }
}
